<script setup lang="ts">
  import { ref } from 'vue'
  import DragBox from './dragBox.vue'
  import DropBox from "./dropBox.vue"
  import ResizeBox from "@/components/ResizeBox.vue"

  interface DropListItem {
    name: string
    id: string
    dropId: string
    style: {
      position: string
      left: number
      top: number
    }
  }

  const dragList = ref([
    {
      name: "A1",
      id: "A111"
    },
    {
      name: "A2",
      id: "A222"
    },
    {
      name: "A3",
      id: "A333"
    },
    {
      name: "A4",
      id: "A444"
    }
  ])

  const dropList = ref([
    {
      name: "A1",
      id: "A111",
      dropId: "D1",
      style: {
        position: "absolute",
        left: 30,
        top: 30,
      }
    },
    {
      name: "A2",
      id: "A222",
      dropId: "D2",
      style: {
        position: "absolute",
        left: 60,
        top: 30,
      }
    }
  ])

  // 删除dropList的元素
  const removeRepeatBox = (id: string) => {
    dropList.value = dropList.value.filter(i => {
      return i.id !== id
    })
    console.log("dropList.value", dropList.value)
  }

  // 右侧增加元素
  const addBox = (item: DropListItem, leftPercent: number, topPercnet: number) => {
    const newItem = {
      name: item.name,
      id: item.id,
      dropId: "",
      style: {
        position: "absolute",
        left: leftPercent,
        top: topPercnet,
      }
    }
    // 判断是否已有
    const itemHasIdx = dropList.value.findIndex(i => i.id === item.id)
    if (itemHasIdx > -1) {
      dropList.value[itemHasIdx] = { ...dropList.value[itemHasIdx], ...newItem }
    } else {
      dropList.value.push(newItem)
    }
    console.log("dropList.value", dropList.value)
  }

</script>

<template>
  <div class="main">
    <ResizeBox :resize-conf="{width: 280,widthRange: [100, 500]}">
      <div class="drag-left" >
        <DragBox
          v-for="(item) in dragList"
          :key="item.id"
          :drag-item="item"
        />
      </div>
    </ResizeBox>
    <!--<ResizeBox :resize-conf="{width: 280,widthRange: [100, 1920]}">-->
      <div class="drag-right">
        <DropBox :drop-list="dropList" @removeRepeatBox="removeRepeatBox" @addBox="addBox"/>
      </div>
    <!--</ResizeBox>-->
  </div>
</template>

<style scoped>
  .main {
    padding: 20px;
    display: flex;
    height: calc(100% - 40px);
  }
  .flex {
    display: flex;
  }
  .drag-left {
    flex: 0 0 200px;
    padding: 20px;
    border: 1px solid black;
    height: calc(100% - 40px);
  }
  .drag-right {
    flex: 1;
    position: relative;
    height: 100%;
  }
</style>